<template>
	<view class="ball-team-reg-page">
		<view v-if="regTyp == 2">
			<img class="page-bg" :src="bgImg" alt="">
			<view class="btn-area">
				<view class="btn-sty" @click="toRegPage(0)">
					<text>公开组</text>
					<img class="public-btn" :src="gkImg" alt="">
				</view>
				<view class="btn-sty" @click="toRegPage(1)">
					<text>职工组</text>
					<img class="worker-btn" :src="zgImg" alt="">
				</view>
			</view>
		</view>
		<view v-if="regTyp != 2" class="xz-area-sty">
			<view class="xz-title">运动员注册条件:</view>
			<view>1.昆山高新区户籍</view>
			<view>2.昆山高新区一年社保</view>
			<view>3.昆山高新区房产</view>
			<view>4.省级及以上篮球注册运动员退役三年内不可报名。</view>
			<view class="xz-title">球队注册条件:</view>
			<view>1.每年每队可最多注册15名运动员，每名运动员每年缴纳注册费100元/人。</view>
			<view>2.注册球队所有高新区篮球比赛报名费全免</view>
			<view>3.注册球队次年可更换2名运动员</view>
			<view>4.球队队名不能超过5个字</view>
			<view class="xz-title">{{regTyp == 0 ? '公开':'职工'}}组添加球员所需问题</view>
			<view>1.球队名字+公司地址</view>
			<view>2姓名+照片</view>
			<view>3.球衣号码</view>
			<view>4.身高</view>
			<view>5.体重</view>
			<view>6.社保号+上传一年社保截图</view>
			<view>7.是否是昆山高新区户籍+上传身份证</view>
			<view>8.是否有昆山高新区房产+上传证明</view>
			<view v-show="regTyp == 1">9.是否在该单位上班</view>
			<view style="margin-top: 12px;">
				<uni-data-checkbox style="display: inline-block;font-size: 30rpx;font-weight: 600;" multiple v-model="checkFla" :localdata="cheackList"></uni-data-checkbox>
				<text style="color:#358afe;display: inline-block;margin-left: -25px;font-size: 30rpx;font-weight: 600;">《球队注册须知》</text>
			</view>
			<view class="xz-btn-area" style="">
				<button style="color: #ffa52d;border: 1px solid #ffa52d;background: #fff;" @click="backUppage">取消</button>
				<button :class="num == 0 ? 'comf-btn':'is-btn-disable'" :disabled="isDisabled" @click="comfBtn">确认 <text v-show="num != 0">{{num}}</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regTyp: 2,
				checkFla: [],
				cheackList: [
					{text: '已阅读并同意', value: 0}
				],
				isDisabled: true,
				num: 10,
				status: null,
				zgImg: '',
				gkImg: '',
				bgImg: '',
				fxParm: {}
			}
		},
		created() {
			this.zgImg = `${this.$projectImg}worker-btn.png`
			this.gkImg = `${this.$projectImg}public-btn.png`
			this.bgImg = `${this.$projectImg}ball-team-reg-bg.png`
		},
		onLoad (e) {
			if (e.parm) {
				this.fxParm = JSON.parse(e.parm)
				this.toRegPage(this.fxParm.fx)
			}
		},
		mounted() {},
		methods: {
			toRegPage (fla) {
				this.regTyp = fla
				const text = fla == 1 ? '职工':'公开'
				this.num = 10
				this.jishi()
			},
			jishi () {
				const _this = this
				this.status = setInterval(() => {
					if (_this.num > 0) {
						_this.num--
					}
					if (_this.num == 0) {
						_this.isDisabled = false
						clearInterval(this.status);
					}
				},1000)
			},
			backUppage () {
				this.regTyp = 2
				this.checkFla = []
				this.isDisabled = true
				clearInterval(this.status)
			},
			comfBtn () {
				if (this.checkFla.length > 0) {
					if (this.fxParm.fx == 0 || this.fxParm.fx == 1 ) {
						uni.navigateTo({
							url: `playRegister?parm=${JSON.stringify(this.fxParm)}`
						});
					} else {
						uni.navigateTo({
							url: `ballTeamRegister?fla=${this.regTyp}`
						});
					}
				} else {
					uni.showModal({
						content: '请勾选已阅读并同意',
						showCancel: false
					})
				}
			}
		}
	}
</script>

<style>
	.ball-team-reg-page {
		height: 100vh;
	}

	.page-bg {
		width: 100%;
		height:100vh;
		position: relative;
		top: 0;
		left: 0;
	}

	.btn-area {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -90px;
		margin-top: -120px;
	}

	.public-btn, .worker-btn {
		width: 180px;
		height: 90px;
	}
	.btn-sty {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.btn-sty text {
		position: absolute;
		    top: 45px;
		    margin-top: -15px;
		    left: 50%;
		    margin-left: -27px;
		    color: #fff;
		    font-weight: 600;
		    font-size: 32rpx;
	}
	.xz-area-sty {
		padding: 35rpx;
	}
	.xz-area-sty view {
		font-size: 26rpx;
		line-height: 24px;
		color: #777;
	}
	.xz-area-sty .xz-title {
		font-size: 30rpx;
		font-weight: 600;
		margin: 10px 0;
		color: #333;
	}
	.xz-btn-area {
		margin-top: 50px;display: flex;
	}
	.xz-btn-area button {
		width: 45%;
	}
	.is-btn-disable {
		color: #333;background: #ccc;
	}
	.comf-btn {
		color: #fff;background: #ffa52d;
	}
	
</style>
<style lang="scss">
</style>